<template>
  <section class="todoapp">
    <TodoHeader @key="keydown" />
    <TodoMain
      :lists="lists"
      @delTodo="delTodo"
      @changeDone="changeDone"
      :type="type"
      @isAllDone="isAllDone"
    />
    <TodoFooter
      :lists="lists"
      @selected="selected"
      :type="type"
      @allDel="allDel"
    />
  </section>
</template>

<script setup lang="ts">
import TodoHeader from "./components/TodoHeader.vue";
import TodoMain from "./components/TodoMain.vue";
import TodoFooter from "./components/TodoFooter.vue";
import { ref } from "vue";

export interface Todo {
  id: number;
  content: string;
  done: boolean;
}

const lists = ref<Todo[]>([
  {
    id: 1,
    content: "吃饭",
    done: true,
  },
  {
    id: 2,
    content: "睡觉",
    done: false,
  },
  {
    id: 3,
    content: "午安",
    done: true,
  },
]);

const type = ref<string>("all");

const delTodo = (id: number) => {
  lists.value = lists.value.filter((item) => item.id !== id);
};

const changeDone = (id: number) => {
  const todo = lists.value.find((item) => item.id === id);
  if (todo) todo.done = !todo.done;
};

const selected = (t: string) => {
  type.value = t;
  console.log(type);
};

const allDel = () => {
  lists.value = lists.value.filter((item) => !item.done);
};

const keydown = (value: string) => {
  console.log(value);
  lists.value = [
    ...lists.value,
    { id: Date.now(), content: value, done: false },
  ];
};

const isAllDone = (check: boolean) => {
  lists.value = lists.value.map((item) => ({ ...item, done: check }));
};
</script>

